<template>
        <section>
          <div class="header">
            <van-nav-bar title="支付" fixed left-text="返回" right-text left-arrow @click-left="onClickLeft"/>
          </div>
            <div class="purchase_quantity">
                <div class="left">应付金额</div>
                <div class="right">￥<span class="totalAmount">100</span></div>
            </div>

            <div class="purchase_quantity " id="Weixin">
                <div class="input_b">
                    <img src="https://stnz.oss-cn-hangzhou.aliyuncs.com/assets/images/pay/z_checked.png" alt="" id="btn1">
                    <input type="radio" name="pay" checked="checked" id="wxrid" class="cb-radio">
                </div>
                <div class="left"><img src="https://stnz.oss-cn-hangzhou.aliyuncs.com/assets/images/pay/z_weixin.png" alt=""></div>
                <div class="right">微信支付</div>
            </div>

            <div class="footer">
                <button @click="WePayCall" class="submit">立即支付(￥<span class="totalAmount">100</span>)</button>
            </div>
              <div class="footer1">
                <button @click="loginOut" class="submit">清除缓存</button>
              </div>
          <div class="footer2">
            <p>温馨提示</p>
            <p>如果点击 立即支付 按钮不能支付，请点击下面清除缓存按钮，重新进行购买商品。</p>

		  </div>
          <!--弹出框-->
          <div v-show="show" class="show">
            <van-loading type="spinner" color="#000"/>
          </div>
        </section>



</template>
<script>
    import sha1 from 'js-sha1'

    export default {
        name: "wxPay",
        data(){
        return {
          show: false
        }
      },
        methods:{
          //返回
          onClickLeft() {
            this.$router.go(-1);
          },
            onload(){
                var that=this;
                var json_data=that.$axios.get(that.$api.weixinUrl);
                var fx_noncestr=that.$base.randomString(32);
                var fx_tampstr=that.$base.createTimestamp();
                json_data.then(function(result){
                   var signStr = "jsapi_ticket=" + result.data + "&noncestr=" + fx_noncestr + "&timestamp=" + fx_tampstr + "&url=" + window.location.href;
                   signStr=sha1(signStr);
                    that.$wxjs.config({
                        debug: false,
                        appId: "wx994320d0aac3cee8",
                        timestamp: fx_tampstr,
                        nonceStr: fx_noncestr,
                        signature: signStr,
                        jsApiList: ['chooseImage', 'uploadImage', 'previewImage', 'onMenuShareTimeline', 'onMenuShareAppMessage', 'onMenuShareTimeline', 'chooseWXPay']
                    });
                })

                var order_id=that.$base.getQueryString("order_id");
                if(order_id===undefined || order_id===null){
                    order_id='3107';
                }
                let params={
                    params: {
                        id: order_id
                    }
                };
                var od=this.$axios.get(this.$api.orderDetail,params);
                od.then(function (result){
                    $(".totalAmount").html(result.data.totalAmount+"");
                });
            },
            /**
             * 调起微信支付
             */
            WePayCall() {
                if (typeof WeixinJSBridge == "undefined") {
                    if (document.addEventListener) {
                        document.addEventListener('WeixinJSBridgeReady', WePayJsApiCall, false);
                    } else if (document.attachEvent) {
                        document.attachEvent('WeixinJSBridgeReady', WePayJsApiCall);
                        document.attachEvent('onWeixinJSBridgeReady', WePayJsApiCall);
                    }
                } else {
                    this.submit();
                }
            },
            submit(){
                this.show = true;
                var that=this;
                let open_id = JSON.parse(localStorage.getItem("wxUserInfo"));
                let openId = JSON.parse(localStorage.getItem("userInfo"));
                console.log(open_id);
                console.log(openId);
                var order_id=that.$base.getQueryString("order_id");
                var open_Id=''
                if(order_id === undefined || order_id === null){
                    order_id='3070';
                }
                if(open_id == null || order_id == '' || order_id == undefined){
                   open_Id =openId.openId;
                   // open_Id =openId.ym_open_id;
                }else if(openId.openId == null || openId.openId == '' || openId.openId == undefined){
                  open_Id =open_id.openid;
                }
                let params={
                    order_id:order_id,
                    open_Id:open_Id
                };
				
				// alert(params.order_id);
				// alert(params.open_Id);
                var res=this.$axios.post(this.$api.weixinWEBPay,params);

                res.then((result)=>{
                    console.log(result);
                     that.show =false;
                  if(result.success){
                        WeixinJSBridge.invoke( 'getBrandWCPayRequest', {
                                "appId":result.data.appId,     //公众号名称，由商户传入
                                "timeStamp":result.data.timeStamp+'',  //时间戳，自1970年以来的秒数
                                "nonceStr":result.data.nonceStr, //随机串
                                "package":result.data.package,
                                "signType":"MD5",         //微信签名方式：
                                "paySign":result.data.paySign, //微信签名
                            },
                            res=>{
                                if(res.err_msg == "get_brand_wcpay_request:ok" ){
                                    //res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
                                    alert('支付成功')
                                }
                            }
                        );
                        if (typeof WeixinJSBridge == "undefined"){
                            if( document.addEventListener ){
                                document.addEventListener('WeixinJSBridgeReady', onBridgeReady, false);
                            }else if (document.attachEvent){
                                document.attachEvent('WeixinJSBridgeReady', onBridgeReady);
                                document.attachEvent('onWeixinJSBridgeReady', onBridgeReady);
                            }
                        }else {
                            onBridgeReady();
                        }

                        /*
                        that.$wxjs.chooseWXPay({
                            timestamp: result.data.timestamp+'', // 支付签名时间戳，注意微信jssdk中的所有使用timestamp字段均为小写。但最新版的支付后台生成签名使用的timeStamp字段名需大写其中的S字符
                            nonceStr: result.data.noncestr, // 支付签名随机串，不长于 32 位
                            package: result.data.package, // 统一支付接口返回的prepay_id参数值，提交格式如：prepay_id=\*\*\*）
                            signType: 'md5', // 签名方式，默认为'SHA1'，使用新版支付需传入'MD5'
                            paySign: result.data.sign, // 支付签名
                            success: function (res) {
// 支付成功后的回调函数

                            }
                        });*/
                    }else{

                        console.log("访问错误！");
                    }
                })
            },
          loginOut:function () {
            var urlId=localStorage.getItem('urlId');
            let urlType=localStorage.getItem('urlType');
            let urlUser_id=localStorage.getItem('urlUser_id');
            let urlIsappinstalled=localStorage.getItem('urlIsappinstalled');
            let urlFrom=localStorage.getItem('urlFrom');
            localStorage.removeItem('userInfo');
            localStorage.removeItem('token');
            localStorage.removeItem('wxUserInfo');
            // this.show=true;
            this.$router.push({path: '/ProductDetails', query:{id:urlId,type:urlType,user_id:urlUser_id,isappinstalled:urlIsappinstalled,from:urlFrom}})
          }
        },
        mounted(){
            this.onload();
        }

    }




</script>

<style scoped>
    * {
        padding: 0;
        margin: 0;
    }

    li {
        list-style: none;
    }

    .txh {
        display: flex;
        display: -webkit-flex;
    }
  .show{
    width: 100%;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.2);
    z-index: 120;
    position: fixed;
    top: 0;
    left: 0;
  }
  /deep/.van-loading{
    width: 50px;
    height: 50px;
    z-index: 0;
    font-size: 0;
    line-height: 0;
    position: relative;
    vertical-align: middle;
    margin: 60% auto;
  }
    html,
    body {
        font-family: pingFangSC-Regular !important;
        background: #f5f5f5;
        width: 100%;
        height: 100%;
    }

    html header,
    body header {
        border-bottom: 1px solid #e8e8e8;
        background: #fff;
    }

    html header ul,
    body header ul {
        display: flex;
        display: -webkit-flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        height: 1.17333333rem;

        padding: 0 2%;
        color: #222;
        box-sizing: border-box;
    }

    html header ul li:nth-child(1) img,
    body header ul li:nth-child(1) img {
        width: 0.21333333rem;
        height: 0.36rem;
    }

    html section #Weixin,
    body section #Weixin,
    html section #alipay,
    body section #alipay {
        margin-top: 0.4rem;
        display: flex;
        display: -webkit-flex;
        justify-content: left;
        align-items: center;
    }

    html section #Weixin .input_b,
    body section #Weixin .input_b,
    html section #alipay .input_b,
    body section #alipay .input_b {
        width: 0.2rem;
        height: 0.2rem;
        position: relative;
        margin-right: 0.2rem;
    }

    html section #Weixin .input_b img,
    body section #Weixin .input_b img,
    html section #alipay .input_b img,
    body section #alipay .input_b img {
        width: 0.2rem;
        height: 0.2rem;
        position: absolute;
        top: 0;
        right: 0;
        z-index: 33;
    }

    html section #Weixin .input_b input,
    body section #Weixin .input_b input,
    html section #alipay .input_b input,
    body section #alipay .input_b input {
        width: 0.2rem;
        height: 0.2rem;
        position: absolute;
        top: 0;
        right: 0;
        opacity: 0;
    }

    html section #Weixin .left,
    body section #Weixin .left,
    html section #alipay .left,
    body section #alipay .left {
        width: 0.57333333rem;
        height: 36%;
        margin-right: 0.18666667rem;
    }

    .left img{
        width: 0.32rem;
        height: 0.24rem;

    }

    html section #Weixin .right,
    body section #Weixin .right,
    html section #alipay .right,
    body section #alipay .right {
        color: #333;

    }

    html section .purchase_quantity,
    body section .purchase_quantity {
        border-bottom: 1px solid #e8e8e8;
        height: 0.53333333rem;
        width: 100%;
        background: #fff;
        display: flex;
        display: -webkit-flex;
        justify-content: space-between;
        align-items: center;
        padding-left: 2%;
        padding-right: 2%;
        box-sizing: border-box;
        margin-top: 0.46rem;
    }

    html section .purchase_quantity .right,
    body section .purchase_quantity .right {
        color: #d40000;

    }

    html .footer,
    body .footer {
        width: 60%;
        height: 1.06666667rem;
        margin: 0.8rem auto 0;
    }

    html .footer button,
    body .footer button {
       width:100%;
        height: 40px;
        background: #10c442;
        border: none;
        color: #fff;

        border-radius: 8px;
        margin: 0 auto;
        display: block;
    }
    html .footer1,
    body .footer1 {
      width: 60%;
      height: 0.4rem;
      margin: 0 auto 0;
    }

    html .footer1 button,
    body .footer1 button {
      width:100%;
      height: 40px;
      background: #10c442;
      border: none;
      color: #fff;
      border-radius: 8px;
      margin: 0 auto;
      display: block;
    }
    .footer2{
      width: 80%;
      margin: 0.1rem auto 0;
    }
    .footer2 p:nth-child(1){
      font-size: 0.16rem;
      color: red;
    }
    .footer2 p{
      font-size: 0.14rem;
      color: red;
    }
    html .footer .Weixin,
    body .footer .Weixin {
        display: block;
        background: #10c442;
    }

    html .footer .alipay,
    body .footer .alipay {
        display: none;
        background: #0AE;
    }

    /*# sourceMappingURL=h5_shouyintai.css.map */
</style>
